<template>
	<view class="loginbox">
		<!-- <u-navbar :border-bottom="false" title=" " :immersive="true" back-icon-color="#000000"
			:background="{backgroundColor: 'rgba(0, 0, 0, 0)'}">
			
		</u-navbar> -->
		<view class="top">
			<image src="http://maxbox-img.oss-cn-beijing.aliyuncs.com/uploads/20231213/192460eb9d9f1dd280b2a39dbe07c7e8.jpg"></image>
			<!-- <image src="https://img.50api.cn/dingdang/qh.png" mode="widthFix"></image> -->
			<!-- <image src="https://maxbox.nacida.love/static/image/bg.png" mode="widthFix"></image>
			<view class="text">
				<view>你好，</view>
				<view>欢迎来到{{appName}}</view>
			</view> -->
		</view>

		<view class="biaodan">
			<!-- #ifndef MP-WEIXIN -->
			<view class="row">
				<u-field v-model="phone" type="number" label="+86" maxlength="11" placeholder="请填写手机号">
				</u-field>
			</view>

			<view class="row">
				<u-field v-model="num" type="number" label="验证码" placeholder="请输入验证码">
					<text class="huoqu" slot="right" @click="getCode">{{codeText}}</text>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange" change-text="xs"></u-verification-code>
			</view>
			<button class="btn" @click="submit">登录</button>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<!-- <button class="btn" @click="weixin">点击登录</button> -->
			<!--
			<view class="" style="text-align: center;margin-bottom: 20rpx;" v-if="share_ma">邀请人为：{{share_ma}}</view>
			-->
			<!-- <button v-if="agreeChecked" open-type="getPhoneNumber" @getphonenumber="login" class="btn">手机号一键登录</button>
			<button v-else class="btn" @click="agreeBut">手机号一键登录</button> -->
			<button v-if="agreeChecked" @click="weixin" class="btn">一键登录</button>
			<button v-else class="btn" @click="agreeBut">一键登录</button>
			<!-- #endif -->

		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="other">
			<u-divider color="#999">其他登录方式</u-divider>
			<image @click="applogin" src="../../static/image/weixin.png" mode=""></image>
		</view>
		<!-- #endif -->
		<view class="agree-box">
			<u-checkbox @change="checkboxChange" v-model="agreeChecked" shape="circle" >
			</u-checkbox>
			<view class="agree-box-text">
			 请先仔细阅读并同意
			 <text class="book-style" @click="$.to('/pages/my/agreement?type=user_agreement')">《用户协议》</text>，
			 <text  class="book-style" @click="$.to('/pages/my/agreement?type=user_privacy')">《隐私协议》</text>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', //手机号
				num: '', //验证码
				code: '',
				codeText: '',
				nickName: '',
				headImage: '',
				share_ma: '',
				appName: '',
				pnoneNum: '',
				agreeChecked: false,
			}
		},
		onLoad(option) {
			let pid = uni.getStorageSync('pid')
			let codeMa = uni.getStorageSync('share_ma')
			if(pid){
				this.share_ma = pid
			}else if (option.share_ma) {
				this.share_ma = option.share_ma
			}else if(codeMa){
				this.share_ma = codeMa
			}
			console.log(this.share_ma, "邀请码");
			this.getName()

		},
		methods: {
			checkboxChange() {
				this.agreeChecked = !this.agreeChecked;
			},
			applogin() {
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event) => {
						const {
							code
						} = event
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						this.$http({
							url: "api/login/get_wechat_info_by_app",
							data: {
								"code": event.code
							}
						}).then(result => {
							console.log(result, '1111');
							if (result.data.code == 1) {
								uni.setStorageSync('user', result.data.data)
								this.getUser()
							}
						}).catch(err => {});
					},
					fail: (err) => {
						this.$tip.tip("授权失败")
						// 登录授权失败  
						// err.code是错误码
					}
				})
			},
			agreeBut() {
				this.$tip.tip("请先仔细阅读并同意用户协议和隐私协议")
			},
			login(e) {
				if (e.detail.encryptedData) {
					if(this.agreeChecked){
						let {
							code,
							encryptedData,
							iv
						} = e.detail
						this.$http({
							url: "api/login/get_mp_wechat_phone",
							data: {
								"code": code,
							}
						}).then(result => {
							if (result.data.code == 1) {
								this.pnoneNum = result.data.data.phoneNumber
								this.weixin()
							}else{
								uni.showToast({
									icon:'none',
									title:'状态码错误'
								})
							}
						}).catch(err => {});
					}else{
						this.$tip.tip("请先同意用户协议和隐私协议")
					}
				} else {
					this.$tip.tip("授权失败")
				}
			},

			codeChange(text) {
				this.codeText = text;
			},
			weixin() {
				uni.login({
					success: (request) => {
						if (request.code) {
							this.$http({
								url: "api/login/mp_wechat_login",
								data: {
									"code": request.code,
									"nickName": this.pnoneNum,
									"share_ma": this.share_ma,
								}
							}).then(result => {
								if (result.data.code == 1) {
									uni.setStorageSync('user_token', result.data.data.token)
									uni.setStorageSync('user', result.data.data.member_data)
									uni.$emit('updataUser');
									uni.switchTab({
										url: '/pages/tabBar/home'
									})
								}else{
									this.$tip.tip(result.data.msg)
								}
							}).catch(err => {});
						}
					}
				})
			},
			getName() {
				this.$http({
					url: "/api/common/get_general",
				}).then(res => {
					if (res.data.code == 1) {
						this.appName = res.data.data.app_name
					}
				}).catch(err => {});
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.$tip.phoneReg.test(this.phone) == false) {
						this.$tip.tip('请填写正确的手机号')
						return
					}
					if(!this.agreeChecked){
						this.$tip.tip("请先同意用户协议和隐私协议")
						return
					}
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http({
						url: "api/login/send_sms",
						data: {
							event: 'login',
							mobile: this.phone
						}
					}).then(res => {
						if (res.data.code == 1) {
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}else{
							this.$tip.tip(res.data.msg)
						}
					}).catch(err => {});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				if(!this.agreeChecked){
					this.$tip.tip("请先同意用户协议和隐私协议")
					return
				}
				if (this.$tip.phoneReg.test(this.phone) == false) {
					this.$tip.tip('请填写正确的手机号')
					return
				}
				if(this.num == ''){
					this.$tip.tip('请填写验证码')
					return
				}
				this.$http({
					url: "api/login/mobile_login",
					data: {
						mobile: this.phone,
						captcha: this.num,
						share_ma: this.share_ma,
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						uni.setStorageSync('user_token', res.data.data.token)
						uni.setStorageSync('user', res.data.data.member_data)
						uni.$emit('updataUser');
						uni.switchTab({
							url: '/pages/tabBar/home'
						})
					}else{
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
		}
	}
</script>

<style>
.loginbox{
	background-color: rgba(5, 188, 198, 0.58);
	background: url("https://img.50api.cn/vx.tongbayun.v3/11.jpg") no-repeat;
   background-size: 100% 100%;
}
	.top {
		position: relative;
		height: 500rpx;
		width: 100%;
		/* background: #3B70EC; */
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
.top image{
	width: 250rpx;
	height: 250rpx;
	border-radius: 20rpx;
}
	/* .top image {
		width: 750rpx;
	} */

	.top .text {
		color: #ffffff;
		position: absolute;
		left: 60rpx;
		top: 170rpx;
		font-size: 50rpx;
	}

	.biaodan {
		padding: 40rpx 60rpx;
		box-sizing: border-box;
	}

	.huoqu {
		color: #3B70EC;
	}

	.row {
		margin-bottom: 30rpx;
	}

	.btn {
		/* background-color: #00DAD9; */
		color: #ffffff;
		background: linear-gradient(84deg, #3B70EC 4%, #AE84F5 95%);
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	.loginbox {
		position: relative;
		min-height: 100vh;
	}

	.other {
		position: absolute;
		width: 750rpx;
		left: 0;
		bottom: 100rpx;
		text-align: center;
	}

	.other image {
		width: 80rpx;
		height: 80rpx;
		margin-top: 30rpx;
	}
	.agree-box {
		width: 80vw;
		margin-top: 100rpx;
		box-sizing: border-box;
		margin-left: 10vw;
		display: flex;
	}
	.agree-box-text{
		color: #999999;
		font-size: 24rpx;
		line-height: 36rpx;
	}
	.book-style {
		color: #2440b3;
		font-size: 24rpx;
		line-height: 36rpx;
		
	}
</style>
